<!doctype html>
<html lang="en">
	<head>
		<title>How it works</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css"  media="screen,projection"/> 

		<style>

			body {
				background-color: #ff5252;
				margin: 0px auto;
			}

		</style>
	</head>
	<body>


        <nav>
            <div class="nav-wrapper">
              <a href="/emotion" class="brand-logo center"><img src="images/logo_small.png"><span style="position:relative; bottom:8px">Emonitor</span></a>
              <ul id="nav-mobile" class="hide-on-med-and-down">
                <li class="right"><a class="modal-trigger" href="#modal1"><i class="mdi-action-account-child"></i></a></li>
                <li class="left"><a class="modal-trigger" href="#modal2"><i class="mdi-action-assignment"></i></a></li>  
                <!-- <li class="left"><a class="modal-trigger" href="/howitworks"><i class="mdi-action-settings-applications"></i></a></li>                 -->
              </ul>
            </div>
        </nav>
        
  <!-- Modal Structure -->
  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <div class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s4">
              <img src="images/xiong1.jpg" alt="" class="circle responsive-img"> 
            </div>
            <div class="col s10">
              <span class="black-text">
                <span class="mdi-social-person red-text accent-2"> Name:  </span><a href="http://www.emonitor.me/ErikXiong.html">Erik Xiong</a><br>
                <span class="mdi-social-school red-text accent-2"> Company:  </span>SIMM, Chinese Academy of Sciences<br>
                <span class="mdi-action-book red-text accent-2"> Role:  </span>Engineer, Data Science Graduate Student<br>
                <span class="mdi-action-extension red-text accent-2"> Skills &amp; Hobbies:  </span>Data Visualization, Nodejs, Computer Vision, Raspberry Pi, Intel Edison, Arduino<br>
                <span class="mdi-communication-email red-text accent-2"> Email:  </span>xiongzhp@outlook.com<br>
              </span>
            </div>
          </div>

          <div class="row valign-wrapper">
            <div class="col s4">
              <img src="images/Tao.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
            </div>
            <div class="col s10">
              <span class="black-text">
                <span class="mdi-social-person red-text accent-2"> Name:  </span>Tony Zhong<br>
                <span class="mdi-social-school red-text accent-2"> Company:  </span>SIMM, Chinese Academy of Sciences<br>
                <span class="mdi-action-book red-text accent-2"> Role:  </span>Designer, Pharmaceutics Graduate Student<br>
                <span class="mdi-action-extension red-text accent-2"> Skills &amp; Hobbies:  </span>Google Materia Design, SketchUp, 3D printing, Solidworks, AI, Final Cut<br>
                <span class="mdi-communication-email red-text accent-2"> Email:  </span>575313339@qq.com
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">close</a>
    </div>
  </div>
    <!-- Modal Structure -->
  <div id="modal2" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h5>Instructions</h5>
      <p>1) Allow the request to use your webcam (if the request didnot pop up), close current tab, reload the page in a different tab.</p>
      <p>2) Click Start!</p>
      <p>3) Our program will capture your face and rate your emotions in real-time.</p>
      <p>4) Try to move your head when the face shape model does not fit your face well.</p>
      <video width=100% class="responsive-video" controls autoplay="autoplay" loop="loop">
        <source src="demo.mp4" type="video/mp4">
      </video>
      <a href="http://www.emonitor.me/howitworks">Take a look at how it works.</a>           
      <h5>What we have Done</h5>
      <p>This is a javascript implementation of face tracking and emotion detection, we built it with nodejs, emit extreme emotions with socket.io and store realtime quantified emotion data into mongodb. </p>
      <p>In addition, we figure out the mean of each quantified emotion(unhappy, happy, surprise) and the counts of extreme emotions in every minute, hours, or time span you set using mapreduce. </p>
      <p>Above all, we induced a new concept, Emotion Index, to measure the level of your emotions, which is calculated in combination of the quantified mean emotions and the counts of extreme emotions.</p><br>
      <h5>To-Do</h5>      
      <p>We made it run smoothly on Intel Edison and Raspeberry Pi, and we will get use of GPIO to make the hardware interact with you whenever extreme emotions are detected.</p>
      <img src="images/edison.jpg" style="max-width:100%;">
      <p>We also plan to make an easy access hardware, which is capable of collecting as much emotion data as possible. For one thing, with the hardware, we can easily collect emotion data from people with psychological problems every day in psychology research, so we can get better understanding of mental disorders, like autism, depression and anxiety. For another, we can apply it in shopping mall for realtime feedback of products from visitors.</p>
      <p>What's your ideas? Contact us xiongzhp@outlook.com.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>
		<script src="javascripts/model_spca_20_svm.js"></script>
		<script src="javascripts/dat.gui.min.js"></script>
        <script type="text/javascript" src="javascripts/jquery.min.js"></script>

      <div class="row right">
        <div class="col s12 m9">
          <div class="card light-blue accent-4">
            <div class="card-content white-text">
              <span class="card-title">How It Works</span>
              <p>You can see a face shape model consisting of some feature points and the line connecting the points. Tune the components(PCA components) with the control bar on the right, you will see different shapes of the face model, which simulates the various faces we captured from camera. Then, we compare the face sharp models with our well trained emotion models, and score them. That's how we quantify emotions.</p>
            </div>
          </div>
        </div>
      </div>
      <div>
		<canvas id="compare" style="position:relative; top: -35px;" width="600" height="550"></canvas>
		<div id="tune" style="position:relative; top: -120px;float:right"></div>
	  </div>
		<script>
		  
		function rebuild() {
			// check how many parameters
			pnums = pModel.shapeModel.eigenValues.length;
			
			ph = new parameterHolder();
			gui.destroy();
			gui = new dat.GUI({ autoPlace: false });
			
			control = {};
			eig = 0;
			for (var i = 0;i < pnums;i++) {
				eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
				control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
			}
			
			for (var i = 0;i < pnums;i++) {
				control['c'+(i+1)].onChange(drawNew);
			}

			params = [];
			for (var i = 0;i < pnums;i++) {
				params.push(ph['component '+(i+1)]);
			}

			drawNew();
		}
		  
		var canvasInput = document.getElementById('compare');
		var cc = canvasInput.getContext('2d');
		cc.fillStyle = "rgb(200,0,0)";
		
		// check how many parameters
		var pnums = pModel.shapeModel.eigenValues.length;
		
		var parameterHolder = function() {
			for (var i = 0;i < pnums;i++) {
				this['component '+(i+1)] = 0;
			}
		};
			
		var ph = new parameterHolder();
		var gui = new dat.GUI({ autoPlace: false });
		var customContainer = document.getElementById('tune');
		customContainer.appendChild(gui.domElement);
	
		var control = {};
		var eig = 0;
		for (var i = 0;i < pnums;i++) {
			eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
			control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
		}
		
		var params;
		var drawNew = function(value) {
			cc.clearRect(0,0,600,600);
			params = [];
			for (var i = 0;i < pnums;i++) {
				params.push(ph['component '+(i+1)]);
			}
			draw(document.getElementById('compare'), similarityTransforms.concat(params));
		}
	
		for (var i = 0;i < pnums;i++) {
			control['c'+(i+1)].onChange(drawNew);
		}

		params = [];
		for (var i = 0;i < pnums;i++) {
			params.push(ph['component '+(i+1)]);
		}
	
		var similarityTransforms = [4,0,0,0];
		//var similarityTransforms = [1, 0, -250, -450];
		//var similarityTransforms = [1, 0, 200, 200];
		var paramslength = params.length;
		var num_points = pModel.shapeModel.numPtsPerSample;
			
		var x,y;
		
		var i, path;
		
		var drawPath = function(canvasContext, path, dp) {
			canvasContext.beginPath();
			var i, x, y;
			for (var p = 0;p < path.length;p++) {
				i = path[p]*2;
				x = pModel.shapeModel.meanShape[i/2][0];
				y = pModel.shapeModel.meanShape[i/2][1];
				for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
					x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
					y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
				}
				a = dp[0]*x - dp[1]*y + dp[2];
				b = dp[0]*y + dp[1]*x + dp[3];
				x += a;
				y += b;
				
				if (i == 0) {
					canvasContext.moveTo(x,y);
				} else {
					canvasContext.lineTo(x,y);
				}
			}
			canvasContext.moveTo(0,0);
			canvasContext.closePath();
			canvasContext.stroke();
		}
		
		function drawPoint(canvasContext, point, dp) {
			var i, x, y;
			i = point*2;
			x = pModel.shapeModel.meanShape[i/2][0];
			y = pModel.shapeModel.meanShape[i/2][1];
			for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
				x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
				y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
			}
			a = dp[0]*x - dp[1]*y + dp[2];
			b = dp[0]*y + dp[1]*x + dp[3];
			x += a;
			y += b;
			canvasContext.beginPath();
			canvasContext.arc(x, y, 2, 0, Math.PI*2, true);
			canvasContext.closePath();
			canvasContext.fill();
		}
	
		var draw = function(canvas, pv) {
			// if no previous points, just draw in the middle of canvas
			
			var params;
			if (pv === undefined) {
				params = currentParameters.slice(0);
			} else {
				params = pv.slice(0);
			}
			
			var cc = canvas.getContext('2d');
			cc.fillStyle = "rgb(0,0,0)";
			cc.strokeStyle = "rgb(0,255,0)";
			//cc.lineWidth = 1;
			cc.save();
			
			var paths = pModel.path.normal;
			for (var i = 0;i < paths.length;i++) {
				if (typeof(paths[i]) == 'number') {
					drawPoint(cc, paths[i], params);
				} else {
					drawPath(cc, paths[i], params);
				}
			}
			
			cc.restore()
	  	}
		draw(document.getElementById('compare'), similarityTransforms.concat(params))
		</script>
	</body>
		<script type="text/javascript" src="javascripts/materialize.min.js"></script>
		<script>
		 $(document).ready(function(){
		    $('ul.tabs').tabs();
		    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
		    $('.modal-trigger').leanModal();
		  });
		</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-62518651-1', 'auto');
  ga('send', 'pageview');

</script>
</html>
